import { TBill } from '@/types';
import { CircleAvatar, IconBox } from '@/components';
import { getIcon } from '@/utils';

type Props = {
   data: TBill;
   onClick?: (value: string) => void;
};

const BillCard = ({ data, onClick }: Props) => {
   if (data.filterdDetails.length === 0) return null;
   let seftDetail = data.filterdDetails[0];
   const isSeftPaid = data.createdBy._id === seftDetail.userId;

   return (
      <div
         className="flex flex-col gap-1 light-card"
         onClick={onClick ? onClick.bind(null, data._id) : undefined}
      >
         <div className="flex-base">
            <div className="flex items-center gap-2">
               <IconBox background={data.category.color}>
                  {getIcon(data.category.icon, {
                     size: 16,
                     type: 'white',
                  })}
               </IconBox>
               <div>{data.bill_desc || data.category.category_name}</div>
            </div>
            <div className="flex relative">
               {!isSeftPaid && (
                  <span className="flex absolute w-14 right-10">
                     (<CircleAvatar url={data.createdBy.avatar} />
                     代付)
                  </span>
               )}

               <span>
                  <span>-</span>
                  <span>{seftDetail.account}</span>
               </span>
            </div>
         </div>
         {/* 成员信息 */}
         {/* <div className="flex-base color-disabled">
            <div className="flex-base gap-1">
               <MembersIcon size={18} />
               {data.members.map((item) => (
                  <CircleAvatar url={item.avatar} key={item.phone} />
               ))}
            </div>
            <div className="flex-base gap-1">
               <PaymentIcon size={18} type="primary" />
               <CircleAvatar url={data.createdBy.avatar} />
            </div>
         </div> */}
      </div>
   );
};

export default BillCard;
